<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="static/common/jsxs/iconfont.css">
    <link rel="stylesheet" href="static/common/jsxs/common.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/mui/3.7.1/css/mui.min.css" rel="stylesheet">
    <link rel="stylesheet" href="static/common/jsxs/mui.picker.min.css">
    <link rel="stylesheet" href="static/common/jsxs/mui.poppicker.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/mui/3.7.1/js/mui.min.js"></script>
    <script src="static/common/jsxs/mui.picker.min.js"></script>
    <script src="static/common/jsxs/mui.poppicker.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.staticfile.org/meyer-reset/2.0/reset.min.css" />
    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/dplayer/1.9.1/DPlayer.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/dplayer/1.8.0/DPlayer.min.js"></script>
    <title>拼团</title>
    <style>
        @keyframes pulse {
            from {
                -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
            }

            50% {
                -webkit-transform: scale3d(1.05, 1.05, 1.05);
                transform: scale3d(1.05, 1.05, 1.05);
            }

            to {
                -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
            }
        }

        .pulse {
            animation-name: pulse;
            animation-iteration-count: infinite;
        }

        .poster {
            width: 100%;
            height: 100vh;
            background: rgba(0, 0, 0, .7);
            position: fixed;
            top: 0;
            z-index: 999;
            display: none;
        }

        .poster img {
            max-height: 75vh;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .mask {
            width: 100vw;
            height: 100vh;
            position: fixed;
            z-index: 99;
            background: rgba(0, 0, 0, .5);
            top: 0;
        }

        .play {
            animation-play-state: running !important;
        }

        .pause {
            animation-play-state: paused !important;
        }

        .cover-div {
            position: fixed;
            top: 0;
            left: 0;
            background: black;
            opacity: 0.5;
            z-index: +100;
            width: 100%;
            height: 100%;
            display: none;
        }

        .common_flex {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /*----------------mui.showLoading---------------*/
        .mui-show-loading {
            position: fixed;
            padding: 5px;
            width: 120px;
            min-height: 120px;
            top: 45%;
            left: 50%;
            margin-left: -60px;
            background: rgba(0, 0, 0, 0.6);
            text-align: center;
            border-radius: 5px;
            color: #FFFFFF;
            visibility: hidden;
            margin: 0;
            z-index: 2000;

            -webkit-transition-duration: .2s;
            transition-duration: .2s;
            opacity: 0;
            -webkit-transform: scale(0.9) translate(-50%, -50%);
            transform: scale(0.9) translate(-50%, -50%);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
        }

        .mui-show-loading.loading-visible {
            opacity: 1;
            visibility: visible;
            -webkit-transform: scale(1) translate(-50%, -50%);
            transform: scale(1) translate(-50%, -50%);
        }

        .mui-show-loading .mui-spinner {
            margin-top: 24px;
            width: 36px;
            height: 36px;
        }

        .mui-show-loading .text {
            line-height: 1.6;
            font-family: -apple-system-font, "Helvetica Neue", sans-serif;
            font-size: 14px;
            margin: 10px 0 0;
            color: #fff;
        }

        .mui-show-loading-mask {
            position: fixed;
            z-index: 1000;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
        }

        .mui-show-loading-mask-hidden {
            display: none !important;
        }

        .mui-picker-inner .mui-checkbox {
            border-bottom: solid 1px rgba(0, 0, 0, .1)
        }

        .mui-toast-message {
            white-space: nowrap;
        }

        .radio-div .rodio-icon {
            margin-right: 5px;
            color: #bfbfbf;
        }

        .radio-div .radio-active {
            color: #f6ce45;
        }

        .content-group .select-div {
            border: solid 0.5px #c5c5c7 !important;
            height: 45px;
            line-height: 45px;
            font-size: 14px;
            border-radius: 3px;
        }

        .content-group .select-div span {
            margin-left: 15px;
        }

        .sign-up-group {
            position: fixed;
            width: 100%;
            bottom: 0px;
            z-index: +101;
            border-top-right-radius: 4px;
            border-top-left-radius: 4px;
            background: #fafafc;
        }

        .common_info {
            width: 100vw;
        }

        .common_info img {
            width: 100vw;
            display: block;
        }

        .weui-slider {
            -webkit-user-select: none;
            user-select: none;
            flex: 1;
            margin: 10vw 0;
        }

        .weui-slider__inner {
            position: relative;
            height: 3vw;
            background-color: #ffeeb8;
            border-radius: 2vw;
        }

        .weui-slider__track {
            height: 3vw;
            background-color: #ffd800;
            width: 0;
            border-top-left-radius: 2vw;
            border-bottom-left-radius: 2vw;
            transition: width 1s;
        }

        .weui-slider__handler {
            position: absolute;
            left: 0;
            top: 50%;
            width: 6vw;
            height: 6vw;
            margin-left: -3vw;
            margin-top: -3vw;
            border-radius: 50%;
            border: 1vw solid white;
            background-color: #fe6e28;
            box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
            transition: left 1s;
        }

        .has_down_tips {
            position: absolute;
            top: -10vw;
            height: 6vw;
            width: 20vw;
            background-color: #ffd800;
            line-height: 6vw;
            font-size: 3.5vw;
            text-align: center;
            border-radius: 1vw;
            transform: translateX(-10vw);
            z-index: 1;
            transition: left 1s;
        }

        .triangle_border_down {
            width: 0;
            height: 0;
            border-width: 2vw;
            border-style: solid;
            border-color: #ffd800 transparent transparent transparent;
            position: absolute;
            bottom: -3.5vw;
            left: 50%;
            transform: translateX(-50%);
        }



        .pulse {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.1);
            }

            100% {
                transform: scale(1);
            }
        }

        .kanjia_info .title {
            width: 100% !important;
            border-radius: unset !important;
            border-top-left-radius: 2vw !important;
            border-top-right-radius: 2vw !important;
            display: flex;
            justify-content: space-around;
            height: 12vw !important;
            top: -6vw !important;
            line-height: 12vw !important;
        }

        .kanjia_info .title span {
            width: 33%;
        }

        .kanjia_info .yuan {
            top: 3vw;
            width: 6vw;
            height: 6vw;
        }

        .kanjia_list {
            display: flex;
            flex-flow: column;
            align-items: center;
        }

        .kanjia_list img {
            width: 7vw;
            border-radius: 50%;
        }

        .kanjia_list span {
            width: 15vw;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
            font-size: 3vw;
            margin-left: 1vw;
            white-space: nowrap;
            text-align: left !important;
        }

        .kanjia_list .item div {
            display: flex;
            justify-content: start;
            align-items: center;
            width: 33.33%;
        }

        .kanjia_list p {
            color: black;
            font-size: 4vw;
            white-space: nowrap;
            width: 33.33%;
            text-align: center;
        }

        .kanjia_list .item {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 2vw 0;
        }

        .kanjia_list :last-child {
            text-align: right;
        }

        .list_loading {
            pointer-events: none;
        }

        .list_loading .content {
            opacity: .6;
        }

        .kanjia_info svg {
            width: 20vw;
            height: 20vw;
            opacity: 1 !important;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
            display: none;
        }

        .list_loading svg {
            display: block !important
        }

        .fixed_right {
            width: 20vw;
            height: 6vw;
            line-height: 6vw;
            text-align: center;
            color: white;
            background-color: rgba(0, 0, 0, 0.65);
            position: fixed;
            z-index: 10;
            right: 0;
            border-top-left-radius: 3vw;
            border-bottom-left-radius: 3vw;
            font-size: 3.5vw;
        }

        .customer-service-group,
        .support-service-group {
            position: fixed;
            left: 50%;
            top: 50%;
            width: 85%;
            transform: translate(-50%, -50%);
            z-index: +101;
            border-radius: 4px;
            background: #fafafc;
        }

        .cover-group-div .phone-div {
            text-align: center;
            font-size: 14px;
            height: 44px;
            background: #01B20C;
            font-size: 16px;
            color: #FFFFFF;
            line-height: 44px;
            text-align: center;
            border-radius: 5px;
            margin-left: 15px;
            margin-right: 15px;
        }

        .tarbar {
            width: 100%;
            height: 20vw;
            position: fixed;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #rules p {
            color: black;
            line-height: 20px;
        }

        .radio-div {
            display: flex;
        }

        .radio-div div {
            margin: 0 2vw;
        }

        .content .poster_btn {
            display: none;
            width: 100%;
            background: #4b00b2;
            height: 10vw;
            line-height: 10vw;
            border-radius: 5vw;
            color: white;
            text-align: center;
            font-size: 4.5vw;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .user_tarbar {
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            height: 10vw;
            line-height: 10vw;
            width: 90%;
            border-radius: 2vw;
            overflow: hidden;
            text-align: center;
            font-weight: bolder;
        }

        .user_tarbar :first-child {
            width: 60%;
            background: #ff4c8d;
        }

        .user_tarbar :last-child {
            width: 40%;
            background: #ffd800;
            color: black;
        }

        .userinfo {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 2vw;
            margin-bottom: 13vw;
        }

        .userinfo img {
            width: 15vw;
            height: 15vw;
            border-radius: 50%;
        }

        .userinfo .text {
            background: lightgray;
            color: black;
            font-size: 3.5vw;
            padding: 3vw;
            border-radius: 1vw;
            line-height: 5vw;
            width: 60vw;
            text-indent: 4vw;
        }

        .mui-popover {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .daojishi {
            font-weight: bolder;
            color: #333333;
            font-size: 5vw;
            text-align: center;
            margin: 2.5vw 0;
        }

        .detail-div {
            min-height: 100px;
            max-height: 200px;
            overflow: hidden;
            position: relative;
        }

        .detail-div .content-group .block-div {
            width: calc(100% / 4);
            text-align: center;
            font-size: 12px;
            color: #808080;
            float: left;
            padding-top: 20px;
            /* padding-bottom: 15px;*/
            position: relative;
        }

        .detail-div .content-group .block-div-content {
            display: block;
            font-size: 14px;
            color: #333333;
            text-align: center;
            margin-top: 0px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            height: 20px;
            line-height: 20px;
        }


        .block-div-join .block-div-content {
            display: block;
            font-size: 14px;
            color: #333333;
            text-align: center;
            margin-top: 0px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            height: 20px;
            line-height: 20px;
        }


        .detail-div .block-div img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }

        .bar-tab {
            height: 60px;
            background-color: #232323;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 99;
        }

        .bar-tab .inline-div {
            width: calc(100% / 3);
            font-size: 12px;
            color: #808080;
            float: left;
            position: relative;
            line-height: 60px;
        }

        .bar-tab .inline-div-i {
            width: 30%;
            float: left;
            text-align: right;
        }

        .bar-tab .inline-div-i .zixun {
            font-size: 20px;
            color: #fff;
        }

        .bar-tab .inline-div-span {
            width: 70%;
            float: left;
        }

        .bar-tab .zixun-content {
            font-size: 14px;
            margin-left: 5px;
            color: #fff;
        }

        .inline-div .line {
            width: 2px;
            height: 40px;
            background: #fff;
            position: absolute;
            right: 0px;
            margin-top: 10px;
        }

        .bar-tab .shop-cart {
            font-size: 20px;
            color: #f6ce45;
        }

        .goumai-content {
            display: block;
            width: 100%;
            margin-top: 13px;
            margin-left: 5px;
            color: #fff;
            font-size: 12px;
        }

        .inline-div-i-cat {
            width: 35%;
            float: left;
            text-align: right;
        }

        .inline-div-span-cat {
            width: 60%;
            float: left;
            line-height: 0px;
            height: 60px;
        }

        .goumai-price {
            display: block;
            width: 100%;
            margin-top: 23px;
            /*margin-top: 30px;*/
            margin-left: 7px;
            color: #fff;
            font-size: 12px;
        }

        .group_btn {
            width: 70vw;
            height: 8vw;
            line-height: 8vw;
            font-size: 4vw;
            font-weight: bold;
            color: white;
            margin: 1vw auto;
            margin-top: 3vw;
            background: #ff4c8d;
            text-align: center;
            border-radius: 5vw;
            margin-bottom: 3vw;
        }

        .notification {
            position: fixed;
            bottom: 20vw;
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .dd_start {
            display: inline;
            font-size: 12px;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.5);
            line-height: 20px;
            border-radius: 10px;
            margin-top: 5px;
            margin-left: 5px;
            padding-left: 10px;
            padding-right: 10px;
        }

        .music-img {
            width: 10px;
            height: 10px;
            margin-right: 10px
        }
    </style>
</head>

<body style="max-width: 100vw;overflow-x: hidden;">
    <script>
        //扩展mui.showLoading
        (function ($, window) {
            //显示加载框
            $.showLoading = function (message, type) {
                if ($.os.plus && type !== 'div') {
                    $.plusReady(function () {
                        plus.nativeUI.showWaiting(message);
                    });
                } else {
                    var html = '';
                    html += '<i class="mui-spinner mui-spinner-white"></i>';
                    html += '<p class="text">' + (message || "数据加载中") + '</p>';

                    //遮罩层
                    var mask = document.getElementsByClassName("mui-show-loading-mask");
                    if (mask.length == 0) {
                        mask = document.createElement('div');
                        mask.classList.add("mui-show-loading-mask");
                        document.body.appendChild(mask);
                        mask.addEventListener("touchmove", function (e) { e.stopPropagation(); e.preventDefault(); });
                    } else {
                        mask[0].classList.remove("mui-show-loading-mask-hidden");
                    }
                    //加载框
                    var toast = document.getElementsByClassName("mui-show-loading");
                    if (toast.length == 0) {
                        toast = document.createElement('div');
                        toast.classList.add("mui-show-loading");
                        toast.classList.add('loading-visible');
                        document.body.appendChild(toast);
                        toast.innerHTML = html;
                        toast.addEventListener("touchmove", function (e) { e.stopPropagation(); e.preventDefault(); });
                    } else {
                        toast[0].innerHTML = html;
                        toast[0].classList.add("loading-visible");
                    }
                }
            };

            //隐藏加载框
            $.hideLoading = function (callback) {
                if ($.os.plus) {
                    $.plusReady(function () {
                        plus.nativeUI.closeWaiting();
                    });
                }
                var mask = document.getElementsByClassName("mui-show-loading-mask");
                var toast = document.getElementsByClassName("mui-show-loading");
                if (mask.length > 0) {
                    mask[0].classList.add("mui-show-loading-mask-hidden");
                }
                if (toast.length > 0) {
                    toast[0].classList.remove("loading-visible");
                    callback && callback();
                }
            }
        })(mui, window);
        $('#close_poster').click(function () {
            $('.poster').fadeOut();
        })
    </script>

    <div class="fixed_right" style="top: 3vw;" onclick="mScroll('rules')">活动规则</div>
    <div class="fixed_right" style="top: 11vw;" onclick="mScroll('infos')">活动介绍</div>
    <div class="fixed_right" style="top: 19vw;" id='kefu'>客服热线</div>

    <!--活动顶部主图-->
    <img src="http://banzhang.wxtsbf.com/20210727-SdECnbyFyXTyDKCn6Afm.png" style="width: 100vw;display: block;" />

    <!--拼团信息-->
    <hr style="width: 100vw;margin-top: 0;">
    <p id='daojishi' class="daojishi"></p>
    <div class="detail-div">
        <div class="content-group activity-enrolment-list" style="position: relative;top: 0;width: 100vw;">
            <div class="block-div">
                <img src="http://admin.wxtsbf.com/static/images/logo_xueshe.jpeg">
                <span class="block-div-content">用户名字</span>
            </div>
            <div class="block-div">
                <img src="http://admin.wxtsbf.com/static/images/logo_xueshe.jpeg">
                <span class="block-div-content">用户名字</span>
            </div>
            <div class="block-div">
                <img src="http://admin.wxtsbf.com/static/images/logo_xueshe.jpeg">
                <span class="block-div-content">用户名字</span>
            </div>
            <div class="block-div">
                <img src="http://admin.wxtsbf.com/static/images/logo_xueshe.jpeg">
                <span class="block-div-content">用户名字</span>
            </div>
            <div class="block-div">
                <img src="http://admin.wxtsbf.com/static/images/logo_xueshe.jpeg">
                <span class="block-div-content">用户名字</span>
            </div>
            <div class="block-div">
                <img src="http://admin.wxtsbf.com/static/images/logo_xueshe.jpeg">
                <span class="block-div-content">用户名字</span>
            </div>
            <div class="block-div">
                <img src="http://admin.wxtsbf.com/static/images/logo_xueshe.jpeg">
                <span class="block-div-content">用户名字</span>
            </div>
            <div class="block-div">
                <img src="http://admin.wxtsbf.com/static/images/logo_xueshe.jpeg">
                <span class="block-div-content">用户名字</span>
            </div>
            <div class="block-div">
                <img src="http://admin.wxtsbf.com/static/images/logo_xueshe.jpeg">
                <span class="block-div-content">用户名字</span>
            </div>
            <div class="block-div">
                <img src="http://admin.wxtsbf.com/static/images/logo_xueshe.jpeg">
                <span class="block-div-content">用户名字</span>
            </div>
            <div class="block-div">
                <img src="http://admin.wxtsbf.com/static/images/logo_xueshe.jpeg">
                <span class="block-div-content">用户名字</span>
            </div>
        </div>
    </div>

    <!--已报名的用户显示 一键邀请亲友加入-->
    <!--未报名的用户显示 一键开启团购-->
    <!--未报名的用户进入别人的页面显示 一键加入团购-->
    <!--已报名未支付显示 您已填写报名信息，立即支付-->
    <div class="group_btn pulse sign_btn">一键开启团购</div>


    <!--富文本-->
    <!--活动介绍-->
    <div class="common_info" id='infos'>
        <img src="http://banzhang.wxtsbf.com/20210727-DGMMS4K65Z6wQGJJrQ8x.png" alt="">
        <img src="http://banzhang.wxtsbf.com/20210727-EFdC8PeeTZcJ5fDY8WnS.png" alt="">
    </div>
    <!--活动规则-->
    <div class="common_info" id='rules'>
        <p>
            <img alt="" src="http://banzhang.wxtsbf.com/20210727-fyhGdbAwmEmX6e8kThyF.png" />
            <img alt="" src="http://banzhang.wxtsbf.com/20210727-Zb7s63jNKJhsQx87tccM.png" />
            <img alt="" src="http://banzhang.wxtsbf.com/20210727-rpWdKSRz3ZJpmzE3dPy8.png" />
        </p>
    </div>


    <!--弹幕-->
    <div class="notification"></div>

    <!--Tabbar-->
    <div style="width: 100%;height: 20vw;"></div>
    <div class="tarbar">
        <!--未报名-->
        <div class="bar-tab tab-state1" id="state1" style="">
            <div class="inline-div" onclick="$('#kefu').click()">
                <div class="inline-div-i">
                    <i class="iconfont zixun icondianhua"></i>
                </div>
                <div class="inline-div-span">
                    <span class="zixun-content">立即咨询</span>
                </div>
                <div class="line"></div>
            </div>
            <div class="inline-div sign_btn">
                <div class="inline-div-i-cat">
                    <i class="iconfont shop-cart iconai-cart"></i>
                </div>
                <div class="inline-div-span-cat">
                    <div class="goumai-price singlePrice">¥ 原价</div>
                    <span class="goumai-content">单人购买</span>
                </div>
                <div class="line"></div>
            </div>
            <div class="inline-div sign_btn">
                <div class="inline-div-i-cat">
                    <i class="iconfont shop-cart iconai-cart"></i>
                </div>
                <div class="inline-div-span-cat">
                    <div class="goumai-price groupPrice">¥ 团购价</div>
                    <span class="goumai-content peopleNumber">3人购买</span>
                </div>
            </div>
        </div>
        <!--已报名支付 给个支付按钮-->
        <!--已报名已支付 我的海报 文案是一键邀请亲友加入-->
    </div>


    <!--客服 二维码-->
    <div class="cover-group-div customer-service-group customer-cover" style="display:none">
        <div class="head-panel">
            微信官方客服
            <div class="group-div" onclick="closeCustomerCover()">
                <i class="iconfont iconuntitled94" style="font-size: 16px;"></i>
            </div>
        </div>
        <div class="panel-body" style="padding-left:0px;padding-right:0px;padding-bottom:10px;background-color: #fff">
            <div class="serviceQrCode-div">
                <img class="serviceQrCode-img" src="http://banzhang.wxtsbf.com/20210727-Bxim2EjkkitmfCZh8wfJ.jpg"
                    style="width: 85%;margin: 2vw auto;display: block;">
            </div>
            <div class="phone-div" onclick="window.location.href = `tel://123456`;">
                直接拨打电话
            </div>
        </div>
    </div>

    <script>

        $('#kefu').click(() => {
            $('.cover-div').show()
            $('.customer-service-group').slideToggle()
        })
        function closeCustomerCover() {
            $('.cover-div').hide()
            $('.customer-service-group').slideToggle()
        }

        function mScroll(id) { $("html,body").stop(true); $("html,body").animate({ scrollTop: $("#" + id).offset().top - $(window).height() / 5 }, 1000); }
        //倒计时
        function timestampToTime(timestamp) {
            var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            var D = date.getDate() + ' ';
            var h = date.getHours() + ':';
            var m = date.getMinutes() + ':';
            var s = date.getSeconds();
            return Y + M + D + h + m + s;
        }
        var firsttime = timestampToTime("{$config.endtime}");
        firsttime = firsttime.replace(/-/g, "/");
        var starttime = new Date(firsttime).getTime();
        setInterval(function () {
            var nowtime = new Date();
            var time = starttime - nowtime;
            var day = parseInt(time / 1000 / 60 / 60 / 24);
            var hour = parseInt(time / 1000 / 60 / 60 % 24);
            var minute = parseInt(time / 1000 / 60 % 60);
            var seconds = parseInt(time / 1000 % 60);
            if (time > 0) {
                $('#daojishi').text((day * 24 + hour) + "小时" + minute + "分" + seconds + "秒");
            }
        }, 1000)


        //未关注二维码
        if ('{$qrcode_url|default=0}' != '0') {
            mui('.mui-popover').popover('toggle', document.getElementById("openPopover"));
        }

        //粉丝头像滚动
        if ($('.block-div').length > 8) {
            var mytop = 0;
            var div = $('.block-div');
            var row = Math.ceil($('.block-div').length / 4);
            var _row = row;
            $('.activity-enrolment-list').append($('.activity-enrolment-list').html())
            var ref = setInterval(function () {
                if (row >= 0) {
                    row--;
                } else {
                    row = _row - 1
                    mytop = div.outerHeight(true);
                    $('.activity-enrolment-list').stop();
                    $('.activity-enrolment-list').css('top', 0 - mytop)
                }

                mytop += div.outerHeight(true)
                $('.activity-enrolment-list').animate({
                    top: '-' + mytop
                });
            }, 3000)
        }
    </script>

    <!--弹幕js-->
    <script>
        var danmu_data;
        var notificationSize = 0;
        //之前是请求接口,返回一些用户昵称就行 我这里放一些假数据 请求后执行 ancyloadNotification()
        danmu_data=['用户A','用户B','用户C','用户D','用户E']
        ancyloadNotification()
        function ancyloadNotification() {
            var timeIntervalNotification = setInterval(function () { //定时器
                var totalLength = danmu_data.length;
                if (notificationSize >= totalLength) {
                    notificationSize = 0
                }
                var messageTplHtml = `<div class="dd_start"><img class="music-img" src="http://banzhang.wxtsbf.com/20200828-iEGBpSnP6psnW2QyBiei.png"><span>恭喜 ${danmu_data[notificationSize]} 报名成功!</span></div>`;
                notificationSize++;
                $(".notification").append(messageTplHtml);
                /**删除第一个**/
                if ($(".dd_start").length > 5) {
                    $(".dd_start").eq(0).remove();
                }
                /**修改背景色**/
                $.each($(".dd_start"), function (index, item) {
                    if ($(".dd_start").length == 2) {
                        if (0 == index) {
                            $(item).css('background', 'rgba(0,0,0,0.3)');
                        }
                    } else if ($(".dd_start").length == 3) {
                        if (0 == index) {
                            $(item).css('background', 'rgba(0,0,0,0.15)');
                        } else if (1 == index) {
                            $(item).css('background', 'rgba(0,0,0,0.3)');
                        }
                    } else if ($(".dd_start").length == 4) {
                        if (0 == index) {
                            $(item).css('background', 'rgba(0,0,0,0.1)');
                        } else if (1 == index) {
                            $(item).css('background', 'rgba(0,0,0,0.15)');
                        } else if (2 == index) {
                            $(item).css('background', 'rgba(0,0,0,0.3)');
                        }
                    } else if ($(".dd_start").length == 5) {
                        if (0 == index) {
                            $(item).css('background', 'rgba(0,0,0,0.05)');
                        } else if (1 == index) {
                            $(item).css('background', 'rgba(0,0,0,0.1)');
                        } else if (2 == index) {
                            $(item).css('background', 'rgba(0,0,0,0.15)');
                        } else if (3 == index) {
                            $(item).css('background', 'rgba(0,0,0,0.3)');
                        }
                    }
                });
            }, 2000);
        }
    </script>
</body>

</html>